<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<template v-if="info">
			
			
			<view class="price-wrap">
				<view class="price">
					￥<text>{{info.orderMsg.order_amount}}</text>
				</view>	
				<view class="text" style="padding: 0 30rpx;">配送地址:{{info.address.address}}</view>
			</view>
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_box.png" mode="widthFix" class="icon"></image>
					<text>商品信息</text>
				</view>
				
				<view class="goods-list">
					<view class="goods-item" v-for="(item, index) in info.goods">
						<u-image :src="item.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{item.name}}</view>
							<view class="attrbox">
								{{item.description}}
							</view>
							<view class="desc" style="margin-top: 6px;">
								<view class="price">¥<text>{{item.goods_price}}</text></view>
								<text class="num">X{{item.goods_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_wallet.png" mode="widthFix" class="icon"></image>
					<text>付款信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">共享瓶押金</view>
					<view class="value">¥{{info.orderMsg.bottle_deposit}}</view>
				</view>
				<!-- <view class="desc-text">
					<view class="label">共享瓶租金</view>
					<view style="text-align: right; font-size: 24rpx; color: #999;">
						<view class="value"><u-icon size="28" name="info-circle"></u-icon> ¥<text>{{bottle_rent}}</text>一个月，半年结算一次</view>
					</view>
				</view> -->
				<view class="desc-text" @click="showRent=true">
					<view class="label">
						共享瓶租金
						<u-icon size="28" name="info-circle"></u-icon>
					</view>
					<!-- <view class="value">¥<text>{{bottle_rent}}</text></view> -->
					<view class="value">¥<text>{{info.orderMsg.rent}}</text></view>
				</view>
				
				<!-- <view class="desc-text">
					<view class="label">钢瓶使用费(年)</view>
					<view class="value">¥{{}}</view>
				</view> -->
				<view class="desc-text">
						<view class="label">楼层费</view>
						<view class="value">¥{{info.orderMsg.floor_amount}}</view>
					</view>
				<view class="desc-text">
					<view class="label">气价</view>
					<view class="value">¥{{info.orderMsg.bottle_amount}}</view>
				</view>
				<view class="desc-text">
					<view class="label">商品增购</view>
					<view class="value">¥{{info.orderMsg.additionalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">实际付款金额</view>
					<view class="value">¥{{info.orderMsg.order_amount}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
			
			<view style="height: 120rpx;"></view>
			<view class="order-foot">
				<u-button class="btn" type="primary" :loading="isLoading" @click="submit()">微信支付</u-button>
			</view>
			
			
		</template>
		
		
		<u-popup v-model="showRent" :closeable="true" mode="bottom" height="400">
			<view class="content-desc">
				<view class="title">共享瓶租金说明</view>
				<view class="text">
					押瓶租金 {{bottle_rent}}元/天
				</view>
				<view class="text">
					押瓶押金 {{bottle_deposit}}
				</view>
				<view class="text">
					<!-- 每半年结算一次（01-01 | 07-01） -->
					钢瓶租金按天计费
				</view>
			</view>
		</u-popup>
	
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            ready: false,
			id:null,
			info:null,
			isLoading:false,
			bottle_rent:0,
			showRent:false,
        };
    },
   onLoad(o) {
       that = this;
		if(o.id){
			this.id = o.id
		}
   },
    onReady() {
    },
    onShow() {
       this.getInit();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async submit(){
			this.isLoading=true;
			const that = this;
			uni.showLoading();
			let res = await this.$api.payMoney({
				order_id: this.id,
			});
			this.isLoading = false;
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				const paydata = res.data.data;
				// this.$message.success(res.data.msg);
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: paydata.timeStamp,
				    nonceStr: paydata.nonceStr,
				    package: paydata.package,
				    signType: paydata.signType,
				    paySign: paydata.paySign,
				    success: function(res) {
				        console.log(res);
				        that.$common.showTip('支付成功','success');
						console.log("res: " + JSON.stringify(res));
				        setTimeout(() => {
				            uni.redirectTo({
								url: `/pages/user/order_info?id=${that.id}`,
							});
				        }, that.$config.timeLoad);
				    },
				    fail: function(err) {
				        console.log('fail:' + JSON.stringify(err));
				        let text = '支付失败:'+err.errMsg;
				        if(err.errMsg == 'requestPayment:fail cancel'){
				            text = '支付取消';
				        }
				        that.$common.showTip(text,'none');
				    }
				});
				// setTimeout(()=> {
				// 	uni.redirectTo({
				// 		url: `/pages/user/order_info?id=${this.id}`,
				// 	});
				// }, 2000);
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getInit(){
			let res = await this.$api.orderDetail({
				order_id:this.id
			});
			let resRent = await	this.$api.showConfig({
							 type:'pay',
							 name:'bottle_rent'
						});
			if (res.data.code == this.$config.RESOK) {
				let info = res.data.data;
				// info.goods.forEach(item=>{
				// 	item.image = this.$config.httpImgs + item.image
				// })
				
				this.info = info;
				this.ready=true;
			} else {
				this.$message.error(res.data.msg);
			}
			if (resRent.data.code == this.$config.RESOK) {
				 this.bottle_rent = resRent.data.data
			} 
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}

.order-warp{
	padding: 24rpx 32rpx;
	.state{
		display: flex;
		color: #fff;
		align-items: center;
		.icon{
			width: 28px;
			height: 28px;
		}
		text{
			margin-left: 6px;
			font-size: 20px;
		}
	}
	.addres-wrap{
		margin-top: 40rpx;
		background: #fff;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 32rpx;
		.icon-add{
			width: 18px;
			height: 18px;
		}
		.info{
			flex: 1;
			padding-left: 20rpx;
		}
		.name{
			margin-right: 12px;
		}
		.addhead{
			margin-bottom: 4px;
		}
		.text{
			font-size: 14px;
		}
	}

}
.ibox{
	background: #fff;
	margin: 16rpx 32rpx;
	border-radius: 12px;
	padding: 0 32rpx;
	
	.log-item{
		display: flex;
		align-items: center;
		padding: 4px 0;
		text{
			margin-right: 10px;
		}
		.icon-copy{
			width: 18px;
			height: 18px;
		}
	}
}

.titlebox{
	display: flex;
	padding: 28rpx 0;
	align-items: center;
	.icon{
		width: 18px;
		height: 18px;
	}
	text{
		margin-left: 5px;
		font-size: 16px;
	}
}
.goods-list{
	border: 0;
}
.desc-text{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #8E8E9A;
	padding: 4px 0;
}
.order-foot{
	text-align: right;
	padding: 10rpx 30rpx;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	 background-color: #F8FAFD;
}

.send-popup{
	padding: 20rpx 30rpx;
	position: relative;
	.btn-close{
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	.title{
		text-align: center;
		font-size: 16px;
		margin-bottom: 20rpx;
	}
	.item{
		margin-bottom: 20rpx;
	}
	.label{
		font-size: 14px;
		margin-bottom: 6px;
	}
	.btnbox{
		padding-top: 30rpx;
	}
}

.attrbox{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 2px 0;
	color: #666;
	.attr-name{
		width: 80%;
		font-size: 12px;
	}
	.num{
		
	}
}
.sell{
	padding: 10px 0;
	color: #666;
}

.goods-list{
	border-top: 1px solid #eee;
	padding: 10rpx 0;
	.goods-item{
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.info{
		flex: 1;
		width: 480rpx;
		padding-left: 20rpx;
	}
	.goods-name{
		line-height: 26px;
		font-size: 14px;
		font-weight: bold;
	}
	.attr{
		font-size: 12px;
		color: #979797;
		margin-bottom: 2px;
	}
	.price{
		font-size: 12px;
		color: $color-red;
		text{
			font-size: 15px;
		}
	}
	.desc{
		
		display: flex;
		justify-content: space-between;
	}
}
.price-wrap{
	text-align: center;
	padding: 40rpx 0;
	.price{
		color: #333;
		font-size: 16px;
		text{
			font-size: 30px;
			font-weight: bold;
		}
	}
}

.content-desc{
		padding: 30rpx;
		.title{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}
</style>
